import Taro, { Component } from '@tarojs/taro'
import { connect } from '@tarojs/redux'
import { View, ScrollView, Picker } from '@tarojs/components'
import './index.less'
import { AtButton, AtAccordion, AtList, AtListItem, AtDrawer, AtCheckbox, AtModal, AtIcon } from 'taro-ui'

@connect(({ houseHome, houseDetail, loading }) => ({
  houseHome,
  houseDetail,
  loading
}))

export default class houseHome extends Component {


  config = {
    navigationBarTitleText: ''
  }

  constructor(props) {
    super(props)
    this.state = {
      isOpened: false,
      isPriceOpened: false,
      newdistrictTypeRange: [],
      newPriceRange: [],
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    const t = this;
    const { dispatch } = t.props;
    Promise.all([
      // 获取列表数据
      dispatch({ type: 'houseHome/loadList' }),
      dispatch({ type: 'houseHome/loadDistrict' }),
    ]).then(()=>{
      t.changeDistrict();
    })
  }

  changeDistrict() {
    const {
      houseHome, dispatch
    } = this.props;
    const { districtTypeRange, priceRangeType } = houseHome
    let list = this.changeTreeDate(districtTypeRange, 'label', 'name');
    list = this.changeTreeDate(districtTypeRange, 'value', 'id');

    let list2 = this.changeTreeDate(priceRangeType, 'label', 'text');
    this.setState({
      newdistrictTypeRange: list,
      newPriceRange: list2
    })
  }

  choseListData(item) {
    const { dispatch } = this.props;
    dispatch({
      type: 'houseDetail/updateState',
      payload: {
        listData: {
          ...item
        }
      }
    })
    Taro.navigateTo({
      url: `/pages/houseDetail/index`
    })
  }

  changeAreaValue(value) {
    const {
      dispatch
    } = this.props;
    let areaTypeRangeList = [];
    if (value.type == 'land') {
      areaTypeRangeList = [{
        minArea: 0,
        maxArea: 0,
        text: '不限'
      }, {
        minArea: 0,
        maxArea: 5,
        text: '5亩以下'
      }, {
        minArea: 5,
        maxArea: 10,
        text: '5~10亩'
      }, {
        minArea: 10,
        maxArea: 20,
        text: '10~20亩'
      }, {
        minArea: 20,
        maxArea: 50,
        text: '20~50亩'
      }, {
        minArea: 50,
        maxArea: 0,
        text: '50亩以上'
      }]

    } else {
      areaTypeRangeList = [{
        minArea: 0,
        maxArea: 0,
        text: '不限'
      }, {
        minArea: 0,
        maxArea: 500,
        text: '0~500m²'
      }, {
        minArea: 500,
        maxArea: 1000,
        text: '500~1000m²'
      }, {
        minArea: 1000,
        maxArea: 2000,
        text: '1000~2000m²'
      }, {
        minArea: 2000,
        maxArea: 4000,
        text: '2000~4000m²'
      }, {
        minArea: 4000,
        maxArea: 0,
        text: '4000m²以上'
      }]
    }

    const updateState = (obj) => {
      dispatch({
        type: 'houseHome/updateState',
        payload: {
          ...obj
        }
      })
    }
    updateState({ areaTypeRange: areaTypeRangeList })
  }

  /**
   * 修改json的key名称
   */
  changeTreeDate(zf_jsonObj, newKey, oldKey) {
    let str = JSON.stringify(zf_jsonObj);
    let reg = new RegExp(oldKey, "g");
    let newStr = str.replace(reg, newKey);
    return JSON.parse(newStr);
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  // 下拉滚动
  onScrollToLower(e) {
    const {
      houseHome, dispatch
    } = this.props;
    const {
      offset, total, listData
    } = houseHome;

    dispatch({
      type: 'houseHome/loadList'
    })
    dispatch({
      type: 'houseHome/updateState'
    })
  }


  handleChangeDistrictSelect(value) {
    const {
      dispatch
    } = this.props;
    const updateState = (obj) => {
      dispatch({
        type: 'houseHome/updateState',
        payload: {
          ...obj
        }
      })
    }
    updateState({ districtTypeSelected: value })
  }

  handleChangeAreaSelect(value) {
    const {
      dispatch
    } = this.props;
    const updateState = (obj) => {
      dispatch({
        type: 'houseHome/updateState',
        payload: {
          ...obj
        }
      })
    }
    updateState({ areaTypeSelected: value })
  }



  render() {
    const {
      houseHome, dispatch
    } = this.props;
    const {
      listData, showAreaList, showDistrictList, houseTypeRange, houseType, areaTypeSelected, areaTypeRange, districtTypeRange, priceRangeType, floorTypeRange, showDrawer, showModel, districtTypeSelected
    } = houseHome;
    const updateState = (obj) => {
      dispatch({
        type: 'houseHome/updateState',
        payload: {
          ...obj
        }
      })
    }

    const handleClick = (value) => {
      if (value === 1) {
        Taro.navigateTo({
          url: `/pages/myOrder/index`
        })
      }
    }
    return (
      <View className='main'>
        <View className='scheduleNear'>
          {/* <View className='chosebtn'>
            <View className='btnLeft'
              onClick={() => {
                Taro.navigateTo({
                  url: `/pages/rentList/index?type=fdzz`
                })
              }}
            >
              <image src="https://factory.wenyangchou.com/myfiles/system/top1.png" />
            </View>
            <View className='btnRight'
              onClick={() => {
                Taro.navigateTo({
                  url: `/pages/rentList/index?type=cfhz`
                })
              }}
            >
              <image src="https://factory.wenyangchou.com/myfiles/system/top2.png" />
            </View>
          </View> */}
          <View className='pick'>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={houseTypeRange} rangeKey="text"
                  onChange={(e) => {
                    dispatch({ type: 'houseHome/initData' })
                    updateState({ houseType: houseTypeRange[e.detail.value] })
                    this.changeAreaValue(houseTypeRange[e.detail.value])
                    dispatch({ type: 'houseHome/loadList' })
                  }}
                >
                  <View className="text_child">
                    {houseType.text}
                    <AtIcon value='chevron-down' size='18' color='#949494'></AtIcon>
                  </View>
                </Picker>
              </AtList>
            </View>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={districtTypeRange} rangeKey="name"
                  onChange={(e) => {
                    dispatch({ type: 'houseHome/initData' })
                    updateState({ districtType: districtTypeRange[e.detail.value] })
                    dispatch({ type: 'houseHome/loadList' })
                  }}
                >
                  <View className="text_child">
                    区域
                    <AtIcon value='chevron-down' size='18' color='#949494'></AtIcon>
                  </View>
                </Picker>
              </AtList>
            </View>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={areaTypeRange} rangeKey="text"
                  onChange={(e) => {
                    dispatch({ type: 'houseHome/initData' })
                    updateState({ areaType: areaTypeRange[e.detail.value] })
                    dispatch({ type: 'houseHome/loadList' })
                  }}
                >
                  <View className="text_child">
                    面积
                    <AtIcon value='chevron-down' size='18' color='#949494'></AtIcon>
                  </View>
                </Picker>
              </AtList>
            </View>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={floorTypeRange} rangeKey="text"
                  onChange={(e) => {
                    dispatch({ type: 'houseHome/initData' })
                    updateState({ floorType: floorTypeRange[e.detail.value] })
                    dispatch({ type: 'houseHome/loadList' })
                  }}
                >
                  <View className="text_child">
                    楼层
                    <AtIcon value='chevron-down' size='18' color='#949494'></AtIcon>
                  </View>
                </Picker>
              </AtList>
            </View>
          </View>
          <View className='firstList'>
            <ScrollView
              scrollY
              onScrollToLower={this.onScrollToLower.bind(this)}
              style="height:100%"
            >
              {
                listData.map((item, i) => <View className='listChild' key={i}
                    onClick={this.choseListData.bind(this, item)}
                >
                  <View className='box_left'>
                    <image src={item.topImage}/>
                    <View className='box_text'>{item.rentType ? '可分租' : '整租'}</View>
                  </View>
                  <View className='box_right'>
                    <View className='product'>{item.name}</View>
                    <View className='address'>{item.address||''} </View>
                    <View className='area'><text>{item.totalArea}</text> m²</View>
                    <View className='price'>{item.totalPrice != -1 ? item.totalPrice + '元/月' : '面议'} </View>
                  </View>
                </View>)
              }
            </ScrollView>
          </View>
          {/* <View className='choseList'>
            <View className='search' onClick={() => {
              updateState({ showDrawer: true })
            }}>
              订阅
            </View>
          </View> */}
        </View>
        <AtDrawer
          show={showDrawer}
          right
          mask
          onClose={() => {
            updateState({ showDrawer: false })
          }}
        >
          <View className='inner-page'>
            <AtAccordion
              open={showDistrictList}
              onClick={
                () => {
                  updateState({ showDistrictList: !showDistrictList })
                }
              }
              title='区域'
            >
              <AtCheckbox
                options={districtTypeRange.map(each => {
                  return {
                    value: each.id,
                    label: each.name
                  }
                }).splice(1, districtTypeRange.length - 1)}
                selectedList={districtTypeSelected}
                onChange={this.handleChangeDistrictSelect.bind(this)}
              />
            </AtAccordion>
            <AtAccordion
              open={showAreaList}
              onClick={() => {
                updateState({ showAreaList: !showAreaList })
              }}
              title='面积'
            >
              <AtCheckbox
                options={areaTypeRange.map(each => {
                  return {
                    value: each.minArea + "-" + each.maxArea,
                    label: each.text
                  }
                }).splice(1, priceRangeType.length - 1)}
                selectedList={areaTypeSelected}
                onChange={this.handleChangeAreaSelect.bind(this)}
              />
            </AtAccordion>
            {/* 公众号关注 */}
            <official-account></official-account>
            <AtButton className='inner-bottom-btn' type='primary' onClick={() => {
              // dispatch({type: 'houseHome/subscribe'})
              updateState({ showDrawer: false })
              updateState({ showModel: true })
            }}>确定</AtButton>
            <AtButton className='inner-cancel-btn' type='default' onClick={() => {
              dispatch({ type: 'houseHome/cancelSubscribe' })
            }}>
              取消
            </AtButton>
          </View>
        </AtDrawer>
        <AtModal
          show={showModel}
          title='标题'
          cancelText='取消'
          confirmText='确认'
          onClose={() => {
            updateState({ showModel: false })
          }}
          onCancel={() => {
            updateState({ showModel: false })
          }}
          onConfirm={this.handleConfirm}
        />
        {/* 二维码 */}
        <AtModal
          isOpened={showModel}>
          <AtModalContent>
            <View >
             我是二维码
            </View>
          </AtModalContent>
          <AtModalAction>
            <Button className="modal-btn" onClick={() => {
              updateState({ showModel: false })
            }}>
              确定
            </Button>
          </AtModalAction>
        </AtModal>
      </View>
    )
  }
}
